<template>
  <div>
    <van-search shape="round" placeholder="请输入搜索关键词" v-model="value" @input="inputFn" />

    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="resultList.length === 0">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span class="hot_item" v-for="item in hotArr" :key="item.id" @click="fn(item.first)">{{item.first}}</span>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <SongItem v-for="obj in resultList" :key="obj.id" :name="obj.name" :author="obj.ar[0].name" :id="obj.id">
        </SongItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import { hotSearchAPI, searchResultAPI } from '@/api'
import SongItem from '@/components/SongItem.vue'

export default {
  name: 'Search',
  data () {
    return {
      value: '',
      hotArr: [],
      resultList: [], // 搜索结果
      loading: false,
      finished: false,
      page: 1,
      timer: null
    }
  },
  async created () {
    const { data: res } = await hotSearchAPI()
    this.hotArr = res.result.hots
  },
  methods: {
    async getListFn (isRefresh) {
      const res = await searchResultAPI({
        keywords: this.value,
        limit: 20
      })
      if (isRefresh === 1) {
        if (res.data.result.songs === undefined) {
          this.finished = true
          this.loading = false
          return
        }
        this.resultList = [...this.resultList, ...res.data.result.songs]
      } else if (isRefresh === 2) {
        if (res.data.result.songs === undefined) {
          this.resultList = []
          return
        }
        this.resultList = res.data.result.songs
        this.loading = false
      } else {
        this.resultList = res.data.result.songs
        this.loading = false
      }
    },
    fn (val) {
      this.page = 1
      this.finished = false
      this.value = val
      this.getListFn(3)
    },
    inputFn () {
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.page = 1
        this.finished = false
        // 输入框值改变
        if (this.value.length === 0) {
          // 搜索关键词如果没有, 就把搜索结果清空阻止网络请求发送(提前return)
          this.resultList = []
          return
        }
        this.getListFn(2)
      }, 900)
    },
    onLoad () {
      this.page++
      this.getListFn(1)
    }
  },
  components: {
    SongItem
  }
}
</script>

<style lang='less' scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>
